<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
        <div id="app">
            <h2>{{title}}</h2>
            用户名：<input type="text" v-model="username">
            <br><br>
            密码：<input type="password" v-model="password">
            <br><br>
            <button v-on:click="login()">登录</button>
        </div>
</body>
<script type="application/javascript" src="js/vue.js"></script>
<script type="application/javascript" src="js/axios.js"></script>

<script>
    //let是js定义的局部变量，var是全局变量
    let app = new Vue({
        el: "#app",//#+id绑定html中的一个dom元素，该元素内会执行vuejs渲染
        data: {
            title: "首页",
            username: "huang",
            password: "123",
        },
        method: {
            login: function () {
                /*alert(("标题: "+ app.title+", 用户名: "+ this.username))
                this.username = "abc";
                this.password = "123";*/
                //点击登录按钮，按照逻辑应该发送一个ajax请求，根据响应决定客户端如何处理
                //步骤：1.发送请求 2.后端Controller处理请求并返回响应 3.客户端根据响应自动执行
                axios.get("user/login")//ajax get请求，参数为url
                //then表示ajax成功的回调函数（200状态码执行）
                .then(function (resp) {//resp是axios封装的对象，包含请求信息
                    console.log(resp)
                //失败的回调函数（4xx，5xx状态码执行，或then前端代码出错时执行）
                }).catch(function (err) {
                    console.error(err);//报错的方式在浏览器控制台（console）打印
                })

                axios.post("user/login")
            }
        },
        create: function () {
            alert("加载完成")
        }
    });
</script>
</html>